<template>
    <div class="login">
        <div>
            用户名：
            <el-input type="text" v-model.trim="username" max-length="20"/>
        </div>
        <div>
            密码：
            <el-input type="password" show-password v-model.trim="password" max-length="20"/>
        </div>
        <div class="code">验证码：
            <el-input style="width: 80px;" type="text" max-length="10" v-model="verify_code"/>
            <img :src="url" alt="验证码" @click="getCode">
        </div>
        <div style="text-align: center;padding-top: 20px">
            <el-button @click="login" style="width:100px;" type="success">登录</el-button>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                username: '',
                password: '',
                verify_code: '',
                url: ''
            }
        },
        mounted() {
            this.getCode()
        },
        methods: {
            login() {
                let {username, password, verify_code} = this;
                this.$api.post('/api-log-in', {username, password, verify_code}, (res) => {
                    if (res) {
                        this.$router.push('/admin')
                    }
                })
            },
             getCode() {
                this.$api.get('/api-get-verify_code', null, (res) => {
                    this.url=window.URL.createObjectURL(res)
                }, null, null, true)
            }

        }
    }
</script>

<style lang="scss">
    .login {
        position: fixed;
        top: 50%;
        left: 50%;
        background: #efefef;
        padding: 40px;
        border-radius: 20px;
        border: 1px solid #cccccc;
        transform: translate(-50%, -65%);

        & > div {
            margin-bottom: 20px;
        }

        .code {
            display: flex;
            align-items: center;
            .el-input--mini .el-input__inner{
                text-align: center;
            }
            & > * {
                margin-right: 10px;
            }
        }

    }

</style>
